<template>
  <view class="wrapper">
    <view class="rightCard">
      <view class="rightCardBody" @click="handleServiceCardClick(service)">
        <view class="left">
          <img :src="service.rightImg" alt="" class="rightCardImg" />
          <view class="rightCardInfo">
            <view class="rightCardName">{{ service.rightName }}</view>
            <view class="rightCardDesc">{{ service.rightDesc || '' }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { env } from '@/api/root';
import common from '@/api/common.js';
import { getPersonRightNum } from '@/api/modules/career';
export default {
  name: 'zhituServiceResultCard',
  props: {
    service: {
      type: Object,
      default: () => {}
    },
    chatId: {
      type: Object,
      default: ''
    },
    isConsultant: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    service: {
      handler(val) {},
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      assessmentVersion: uni.getStorageSync('assessmentVersion'),
      cardType: uni.getStorageSync('cardType')
    };
  },
  methods: {
    async getPersonRightNumFn(rightId) {
      const params = {
        personId: this.personId || undefined,
        rightId,
        cardType: this.cardType
      };
      const res = await getPersonRightNum(params);
      return res.data.ownNum - res.data.useNum;
    },
    //处理点击卡片里的每一项
    async handleServiceCardClick(item) {
      console.log('点击了服务卡片', item);

      const rightPersonId = this.service.rightPersonId;
      const rightPersonName = this.service.rightPersonName;
      // 同一处理还没开放的情况
      if (item.rightStatus == 0) {
        uni.showToast({ icon: 'none', title: '敬请期待！', duration: 1000 });
        return;
      }
      // 职业测评
      if (item.rightId == 2) {
        if (item.rightStatus == 1) {
          uni.showToast({
            icon: 'none',
            title: '请先完成职业测评！',
            duration: 1000
          });
          return;
        } else {
          uni.navigateTo({
            url: `/pagesSub/careerAssessResultActNew/index?personId=${this.service.rightPersonId}`
          });
        }
      }
      // 职业报告,其实就是职业测评结果页面的职业报告
      if (item.fileUrl) {
        this.openReport(item.fileUrl);
      }

      //简历诊断
      if (item.rightId == 4) {
        uni.navigateTo({
          url: `/pagesSub/newResume/resumeAssessment/index?target=AIResumeDiagnoseNew`
        });
      }
      //性格测评
      if (item.rightId == 1) {
        const discLeftUseNum = await this.getPersonRightNumFn(1); // 性格测评的内层rightId是1
        //顾问不能点性格测评，webview不能返回聊天页面
        if (item.rightStatus == 1) {
          let url;
          if (env == 'test') {
            url = `https://3gtest.crm1001.com/disc/#/disc/question?personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&cardType=${this.cardType}&discLeftUseNum=${discLeftUseNum}`;
          } else if (env == 'pro' || env == 'pre') {
            url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&cardType=${this.cardType}&discLeftUseNum=${discLeftUseNum}`;
          }
          uni.navigateTo({
            url:
              '/pagesSub/public/web/descWebView?link=' + encodeURIComponent(url)
          });
        }
        if (
          (item.rightStatus == 2 || item.rightStatus == 3) &&
          item.extra &&
          item.extra.userId
        ) {
          let url;
          const userId = item.extra.userId;
          if (env == 'test') {
            url = `https://3gtest.crm1001.com/disc/#/disc/result?userId=${userId}&personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&cardType=${this.cardType}&discLeftUseNum=${discLeftUseNum}`;
          } else if (env == 'pro' || env == 'pre') {
            url = `https://3g.crm1001.com/v2/disc/#/disc/result?userId=${userId}&personId=${rightPersonId}&iname=${rightPersonName}&phone=18825449087&from=careerPathResult&cardType=${this.cardType}&discLeftUseNum=${discLeftUseNum}`;
          }
          uni.navigateTo({
            url:
              '/pagesSub/public/web/descWebView?link=' + encodeURIComponent(url)
          });
        }
        if (item.rightStatus == 3 && !item.extra) {
          uni.showToast({
            icon: 'none',
            title: '该服务已经过期!',
            duration: 1000
          });
        }
      }
      //ai面试
      if (item.rightId == 17) {
        const queryParams = {
          userNum: item.userNum || 0,
          rightCount: item.rightCount || 3,
          rightPersonId: rightPersonId
        };
        const queryString = common.serializeQueryParams(queryParams);
        console.log('queryString', queryString);
        uni.navigateTo({
          url: `/pagesSub/companyCenter/interviewAI/majorSearchAI${queryString}`
        });
      }
      //职途报告21是第一级，7是第二级
      if (item.rightId == 7) {
        if (item.rightStatus == 1) {
          uni.showToast({
            icon: 'none',
            title: '请咨询顾问生成职途报告！',
            duration: 1000
          });
        } else if (item.rightStatus == 2) {
          const url = item.extra.pdfUrl
            ? item.extra.pdfUrl
            : item.extra.pdfUrlV2;
          this.openReport(url);
        }
      }
    },
    //打开职业报告
    openReport(fileUrl) {
      if (!fileUrl) {
        uni.showToast({ icon: 'none', title: '打开职业报告出错！' });
        return;
      }
      uni.showLoading({
        title: '打开中'
      });

      uni.downloadFile({
        url: fileUrl, // 文件的本身url
        filePath: wx.env.USER_DATA_PATH + '/' + this.service.rightName + '.pdf', // 本地自定义的文件名
        success: function (res) {
          let filePath = res.filePath;
          uni.openDocument({
            filePath: filePath,
            success: function () {
              uni.hideLoading();
            },
            fail: function () {
              uni.hideLoading();
            }
          });
          uni.hideLoading();
        },
        fail: function (res) {
          uni.hideLoading();
          uni.showToast({
            icon: 'none',
            title: '职业报告连接已经过期！',
            duration: 1000
          });
        },
        complete: (res) => {
          console.log('complete', res);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  flex: 1;
}
.rightCard {
  //要调整卡片的宽度只能用margin调整
  // margin-left: 150rpx;
  width: 515rpx;
  margin: 0 16rpx;
  .rightCardBody {
    display: flex;
    justify-content: space-between;
    border-radius: 8rpx;
    background: #ffffff;
    padding: 20rpx 20rpx;
    margin-bottom: 16rpx;
    &:last-of-type {
      margin-bottom: 0;
    }
    .left {
      display: flex;
      .rightCardImg {
        width: 104rpx;
        height: 104rpx;
        margin-right: 16rpx;
        min-width: 104rpx;

        border-radius: 2rpx;
      }
      .rightCardInfo {
        display: flex;
        flex-direction: column;
        padding-top: 8rpx;
        .rightCardName {
          font-size: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 44rpx;
          margin-bottom: 16rpx;
          .character {
            color: #000000;
          }
        }
        .rightCardDesc {
          display: inline-block;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
          line-height: 36rpx;
          max-width: 350rpx;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .right {
      display: flex;
      align-items: flex-end;
      .bottomBtn {
        min-width: 137rpx;
        background: #ffffff;
        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
        padding: 8rpx 40rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #f75a3e;
        line-height: 36rpx;
      }
    }
  }
  .rightCardBottom {
    display: flex;
    justify-content: flex-end;
    .bottomBtn {
      padding: 8rpx 40rpx;
      color: #f75a3e;
      border-radius: 32rpx;
      border: 2rpx solid #d3d3d3;
    }
  }
}
</style>
